import {
  useState,
  useMemo,
  useCallback,
  useEffect,
  useRef,
  createContext,
} from "react";
import TestHoc from "./TestHoc";
let MyContext = createContext();
function Son(props) {
  console.log('props',props)
  return (
    <div>
      <MyContext.Consumer>
        {(value) => {
          return (
            <div>
              SON: name:{value.name} age:{value.age}
            </div>
          );
        }}
      </MyContext.Consumer>

      <div>
        
        {props.x}
        {props.y}
      </div>
    </div>
  );
}

let HocSon = TestHoc(Son);
function App() {
  let divRef = useRef();
  let [num, setNum] = useState(99);
  useEffect(() => {
    console.log("divRef", divRef.current);
  }, [num]);
  let [arr, setArr] = useState([1, 2, 3]);
  let arrMemo = useMemo(() => {
    let all = 0;
    arr.forEach((item) => {
      all += item;
    });
    return all;
  }, [arr]);

  let addArr = useCallback(() => {
    setArr([...arr, arr.length + 1]);
  }, [arr]);
  return (
    <div>
      <div>
        num:{num}
        <div>
          <button
            onClick={() => {
              setNum(num++);
            }}
          >
            addNum
          </button>
        </div>
      </div>
      <div ref={divRef}>ref</div>
      <div>
        <div>arr:{arr.join(",")}</div>
        <div>arrMemo:{arrMemo}</div>
        <div>
          <button onClick={addArr}>addArr</button>
        </div>
      </div>

      <div>
        <MyContext.Provider value={{ name: "lisi", age: 20 }}>
          <Son />
        </MyContext.Provider>
      </div>

      <div>
        <MyContext.Provider value={{ name: "lisi", age: 20 }}>
          <HocSon></HocSon>
        </MyContext.Provider>
      </div>
    </div>
  );
}

export default App;
